<style lang="sass" scoped>
    .searchs-cont{
        position:absolute;
        z-index:10;
        padding-top:25px;
        padding-left:32px;
        top:0;
        right:0;
        width:138px;
        height:124px;
        .search{
            width:74px;
            height:74px;
            background:rgba(0,0,0,0.2);
            border-radius:50%;
            display:block;
            img{
                display:block;
                width:100%;
                height:100%;
            }
        }
    }
    
    .swiper-container {
        width: 750px;
        height: 440px;
        .swiper-img{
            width:100%;
            height:100%;
            display:block;
        }
    } 
    .img-module{
        width:750px;
        height:440px;
        background:#ff0000;
        display:block;
        img{
            display:block;
            width:100%;
            height:100%;
        }
    }
    .categ-module{
        .title{
            height:56px;
            line-height:56px;
            font-size:28px;
            color:#3c3c3c;
            background:#f5f5f5;
            text-indent:65px;
        }
        .cont{
            padding:25px 42px;
            flex-wrap: wrap;
            justify-content: space-around;
            .group{
                width:168px;
                min-width:168px;
                margin-bottom:25px;
                .img{
                    width:168px;
                    height:168px;
                    background:#000;
                    border-radius:50%;
                    box-shadow:0 3px 9px 5px #ccc;
                    img{
                        display:block;
                        width:100%;
                        height:100%;
                        border-radius:50%;
                    }
                }
                .text{
                    font-size:28px;
                    color:#878787;
                    text-align:center;
                    margin-top:10px;
                }
            }
        }
    }
    .img-module2{
        .title{
            height:56px;
            line-height:56px;
            font-size:28px;
            color:#3c3c3c;
            background:#f5f5f5;
            text-indent:65px;
        }
        .cont{
            padding:20px 0;
            .group{
                width:698px;
                height:210px;
                margin:0 auto 10px;
                img{
                    display:block;
                    width:100%;
                    height:100%;
                }
            }
        }
    }
    .footerd{
        img{
            width:122px;
            height:142px;
            margin: 40px auto 10px;
            display:block;
        }
    }

 
</style>
<template>
    <div class="container">
        <!-- 搜索模块 -->
        <div @click.stop="routerGo('search')" class="searchs-cont">
            <div class="search">
                <img src="../../assets/images/home/zjm_ss.png">
            </div>
        </div>

        <template v-for="(item,i) in homeview">
            
            <!-- 图片链接模板 -->
            <a v-if="item.type==='single_banner'" class="img-module" :href="item.contextList[0].imageLink">
                <img src="../../assets/images/index/zjm_gg.png" alt="">
            </a>
            <!-- 2行6个模板 -->
            <div v-if="item.type==='categ'" class="categ-module">
                <div class="title">| {{item.columnName}}</div>
                <div class="cont flex">
                    <router-link v-for="(item2,i2) in item.contextList" :to="{name:'module_categ',query:{categId:item2.categId,categName:item2.categName,contextId:item2.contextId}}" tag="div" class="group">
                        <div class="img">
                            <img :src="item2.categImageUrl" alt="">
                        </div>
                        <div class="text">{{item2.categName}}</div>
                    </router-link>
                    <!-- <router-link :to="{name:'module_categ'}" tag="div" class="group">
                        <div class="img">
                            <img src="../../assets/images/index/icon_kxdq.png" alt="">
                        </div>
                        <div class="text">科学世界</div>
                    </router-link>
                    <router-link :to="{name:'module_categ'}" tag="div" class="group">
                        <div class="img">
                            <img src="../../assets/images/index/icon_zyjd.png" alt="">
                        </div>
                        <div class="text">中英经典</div>
                    </router-link>
                    <router-link :to="{name:'module_categ'}" tag="div" class="group">
                        <div class="img">
                            <img src="../../assets/images/index/icon_ctgx.png" alt="">
                        </div>
                        <div class="text">传统国学</div>
                    </router-link>
                    <router-link :to="{name:'module_categ'}" tag="div" class="group">
                        <div class="img">
                            <img src="../../assets/images/index/icon_czhb.png" alt="">
                        </div>
                        <div class="text">创作绘本</div>
                    </router-link>
                    <router-link :to="{name:'module_categ'}" tag="div" class="group">
                        <div class="img">
                            <img src="../../assets/images/index/icon_shqg.png" alt="">
                        </div>
                        <div class="text">生活情感</div>
                    </router-link> -->
                </div>
            </div>
            <!-- 2行2图片模板 -->
            <div v-if="item.type==='activity'" class="img-module2">
                <div class="title">| {{item.columnName}}</div>
                <div class="cont">
                    <router-link :to="{name:'module_recom',query:{contextId:item2.contextId}}" v-for="(item2,i2) in item.contextList" class="group" tag="div">
                        <img :src="item2.activityImageUrl" alt="">
                    </router-link>
                </div>
            </div>

            <!-- swiper模板 -->
            <div v-if="item.type==='more_banner'" :id="'swiper-container-'+item.columnCode" class="swiper-container">
                <div class="swiper-wrapper">
                    <a v-for="(item2,i2) in item.contextList" class="swiper-slide" :href="item2.imageLink">
                        <img :src="item2.bannerImageUrl" class="swiper-img">
                    </a>
                </div>
                <!-- 如果需要分页器 -->
                <div :id="'pagination-'+item.columnCode" class="swiper-pagination"></div>
            </div>
        </template>

        <!-- <div class="footerd">
            <img src="../../assets/images/home/logo.png" alt="">
        </div> -->

        <bookcar></bookcar>
        <totop></totop>
    </div>
</template>
<script>
    import totop from "commonvue/totop";
    import bookcar from "commonvue/bookcar";
    import { mapMutations, mapActions } from "vuex";
    export default {
        components: {
            totop,
            bookcar,
        },
        data() {
            return {
                homeview:[]
            };
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                util.ajax({
                    url: config.baseApi + 'bookMall-h5/api/common/getDevelopmentState',
                    success:(res=>{
                        if(res.data==='1'){
                            $('body .ready').css({display:'flex'})
                        }
                    })
                })
                this.getHomeInfo();
                if(this.$route.query.companyCode){
                    util.setStorage('local','companyCode',this.$route.query.companyCode)
                }
            });
        },
        methods: {
            getHomeInfo(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/home/getHomeInfo',
                    success:(data=>{
                        this.homeview = data.data;
                        this.$nextTick(()=>{
                            data.data.forEach((item,i) => {
                                if(item.type==='more_banner'){
                                    this.createdSwiper(item.columnCode)
                                }
                            });
                        })
                    })
                })
            },
            createdSwiper(id){
                new Swiper (`#swiper-container-${id}`, {
                    loop: true, // 循环模式选项
                    autoplay:true,
                    // 如果需要分页器
                    pagination: {
                        el: `#pagination-${id}`,
                    },
                })  
            }
        },
        
    };
</script>